/*
Theme Name: iReading
Theme URI: http://www.jungedushu.com
Author: Hunter
Author URI: http://www.jungedushu.com
Description:
Version: 0.1.0
License: MIT
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: iReading
Tags:
*/

/* color */
$blue: #007bff;
$indigo: #6610f2;
$purple: #6f42c1;
$pink: #e83e8c;
$red: #dc3545;
$orange: #fd7e14;
$yellow: #ffc107;
$green: #28a745;
$teal: #20c997;
$cyan: #17a2b8;
$white: #fff;
$gray: #6c757d;
$gray-dark: #343a40;

$primary: #007bff;
$secondary: #6c757d;
$success: #28a745;
$info: #17a2b8;
$warning: #ffc107;
$danger: #dc3545;
$light: #f8f9fa;
$dark: #343a40;

$background: $light;
$header-background: $white;
$header-border-color: rgba(0, 0, 0, .125);
$content-background: $white;
$footer-background: $dark;
$footer-font-color: $light;
$a-link-color: $secondary;
$a-hover-color: $primary;
$a-visited-color: $primary;
$a-active-color: $primary;


/*
@media (min-width: 1920px) {
  .container {
    max-width: 1500px;
  }
}

*/

body {
  position: relative;
  display: block;
  background: $background;
  font-family: '微软雅黑', 'Microsoft Yahei', 'Arial', 'sans-serif';
  color: $secondary;
}

img {
  height: auto;
  max-width: 100%;
  border: none;
  display: block;
}

a {
  text-decoration: none;
  color: $a-link-color;
}

a:hover {
  text-decoration: none;
  color: $a-hover-color;
}

/*header 样式开始*/
header {
  margin-bottom: 0.25rem;
  border-bottom: solid 1px $header-border-color;
  background-color: $header-background;
}

.header-logo {
  position: relative;
  text-align: center;
  margin: 1rem;
}

.header-menu {
  /*width: 100%;*/
  /*height: auto;*/
  position: relative;
  text-align: center;
  margin: 1rem;
}

/*header 样式结束*/

/* wordpress nav 自动生成代码开始 */
.header-menu-items {
  width: 100%;
  padding: 0 1%;
  margin: 0 auto;
  display: block;
  text-align: left;

}

.header-menu-items li {
  display: inline-block;
  margin: 0 1rem;
  padding: 1rem 0.5rem;
  transition: all 0.8s;
  -moz-transition: all 0.8s;
  -webkit-transition: all 0.8s;
  -o-transition: all 0.8s;
  border-bottom: 3px solid $content-background;
  font-size: 1.25rem;
}

.header-menu-items li.current-menu-item, .header-menu-items li:hover {
  color: $a-hover-color;
  border-bottom: solid 3px $a-hover-color;
}

/* wordpress nav 自动生成代码结束 */

/* breadcrumb 样式开始*/
.breadcrumb {
  width: 100%;
  margin: 0.25rem 0;
  padding: 0.5rem;
  border: 1px solid rgba(0, 0, 0, .125);
  border-radius: .25rem;
  background: $content-background;
}

/* breadcrumb 样式结束*/

/* article 样式开始 */
article {
  height: auto;
  width: 100%;
  margin-bottom: 0.5rem;
  background: $content-background;
  text-align: left;
  overflow: hidden;
}

article h2 {
  font-size: medium;
  font-weight: bolder;
}

/*透明渐变水平线*/
//article hr {
//  width: 100%;
//  height: 1px;
//  margin: 1rem auto;
//  border: 0;
//  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
//}

.article-title {
  padding: 0.5rem 1rem;
  text-align: left;
  font-size: larger;
}

.article-meta {
  display: inline-block;
  margin: 0.5rem 0;
  vertical-align: middle;
  font-size: small;
}

.article-category {
  display: inline-block;
  padding: 0 1rem;
}

.article-read-times {
  display: inline-block;
  padding: 0 1rem;
}

.article-author {
  display: inline-block;
  padding: 0 1rem;
}

.article-publish-time {
  display: inline-block;
  padding: 0 1rem;
}

.article-more {
  display: inline-block;
  font-size: small;
}

.article-excerpt {
  position: relative;
  border: 1px dotted $secondary;
  margin: 1rem;
  padding: 0.5rem;
  text-align: left;
  display: block;

}

.article-excerpt .article-excerpt-title {
  position: absolute;
  top: -1em;
  left: 5%;
  line-height: 1.5rem;
  padding: 0 0.5rem;
  background-color: $white;
}

.article-excerpt-no-border {
  padding: 0;
  border: 0;
}

.article-content {
  height: auto;
  margin: 0.5rem 0;
  padding: 0.5rem 2.5%;
  display: block;
  line-height: 2rem;
  text-align: left;
  text-indent: 2rem;
}

.article-content h2 {
  padding: 0.25rem 1rem;
  border-left: 0.25rem solid $secondary;
  font-size: medium;
  font-weight: bolder;
  text-indent: 0;
  background-color: $light;
}

.article-content h3 {
  font-size: medium;
  font-weight: bolder;
}

.article-content ul li {
  list-style-type: toggle(circle, lower-alpha, lower-roman);
}

.article-content img {
  margin: auto;
}

.article-tags {
  height: auto;
  width: 100%;
  margin: 0 -2.5rem;
}

.article-tags a {
  color: $white;
}

.article-tags li {
  margin-right: 0.25rem;
  padding: 0.25rem 0.5rem;
  display: inline-block;
  background: $info;
}

.article-tags li:hover {
  background: $warning;
}

.article-notice {
  overflow: hidden;
}

.article-notice h2 {
  font-size: medium;
  font-weight: bold;
}


/* 侧边栏样式开始*/
.sidebar ul li {
  border-bottom: 1px dotted #ccc;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  list-style-type: circle;
}

.widget {
  height: auto;
  width: 100%;
  margin-bottom: 1.5rem;
  padding: 0;
  background: $content-background;
  overflow: hidden;
}

.widget-title {
  padding: 1rem;
  width: 100%;
  font-weight: bold;
}

.widget ul {
  padding: 1rem;
  counter-reset: section;
  line-height: 2rem;
}

.widget ul li {
  border-bottom: 1px dotted #ccc;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  list-style-type: circle;
}

.widget .hot-articles ul li:before {
  counter-increment: section;
  content: counter(section);
  display: inline-block;
  padding: 0 0.5rem;
  line-height: 1.5rem;
  background: $light;
  border-radius: 0.25rem;
}

.widget .hot-articles ul li:nth-child(1):before {
  background: $danger
}

.widget .hot-articles ul li:nth-child(2):before {
  background: $primary
}

.widget .hot-articles ul li:nth-child(3):before {
  background: $success
}

.widget post-date {
  float: right;
}

/* 搜索框开始 */
.widget_search {
  /*padding: 1rem 0;*/
  width: 100%;
  border: none;
}

.widget_search form {
  position: relative;
  margin: 0.25rem;
}

.widget_search input {
  width: 100%;
  height: 2rem;
  padding: 0.5rem;
  border: 2px solid $info;
  border-radius: 5px;
  background: transparent;
  outline: none;
  font-size: small;
}

.widget_search button {
  height: 2rem;
  width: 5rem;
  cursor: pointer;
  position: absolute;
  background: $info;
  border: none;
  border-radius: 0 5px 5px 0;
  top: 0;
  right: 0;
  font-size: small;
}


.widget_search button:before {
  content: "搜索";
  color: $white;
}

/* 搜索框结束 */

/* 侧边栏样式结束*/


/* 时间轴样式开始 */
.timeline {

}

.timeline-item {
  // padding 调整文字与圈的位置
  margin: 0 15rem;
  padding: 1rem 2rem;
  position: relative;
  //color: rgba(0, 0, 255, 0.7);
  //调整竖线的颜色
  border-left: 5px solid rgba(0, 0, 0, 0.3);
  line-height: 1.5rem;
}

.timeline-item h2 {
  font-size: medium;
  font-weight: bold;
  color: $secondary;
}

.timeline-item p {
  margin: 1rem 0;
  font-size: medium;
  color: $secondary;
}


.timeline-item::before {
  content: attr(date-is);
  position: absolute;
  //调整日期在左侧的位置
  left: -8rem;
  //top: 5rem;
  display: block;
  font-weight: bold;
  font-size: medium;
  color: $success;
}

.timeline-item::after {
  //width与height结合border-radius调整圈大小
  width: 20px;
  height: 20px;
  display: block;
  top: 1em;
  position: absolute;
  // 调整圈在线上的位置
  left: -12px;
  border-radius: 20px;
  content: '';
  //border: 2px solid rgba(0, 255, 0, 0.3);
  border: 3px solid $warning;
  background: $content-background;
}

.timeline-item:last-child {
  -o-border-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 60%, rgba(0, 0, 0, 0)) 1 100%;
  border-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 60%, rgba(0, 0, 0, 0)) 1 100%;
}

/* 时间轴样式结束*/

footer {
  height: auto;
  width: 100%;
  background: $footer-background;
  color: $footer-font-color;
}

footer a {
  color: $footer-font-color;
}

footer a:hover {
  color: $footer-font-color;
}

.footer-links {
  position: relative;
  text-align: center;
  margin: 0.5rem;
  color: $footer-font-color;
}


.footer-menu-items {
  width: 100%;
  margin: 0;
  padding: 0 1%;
  display: block;
  text-align: center;

}

.footer-menu-items li {
  display: inline-block;
  padding: 1rem;
}


.footer-copyright {
  margin: 0.5rem;
  text-align: center;
}
